<template>
  <div class="author">
    <div class="demo-basic--circle">
      <div class="author-div">
        <a-avatar :size="100" :src="circleUrl"></a-avatar>
        <div class="author-name">爱勇宝</div>
        <div class="author-introduction">最能让人感到快乐的事，莫过于经过一番努力后，所有东西正慢慢变成你想要的样子。</div>
        <div class="author-tag">
          <a-tag color="pink">JavaScript</a-tag>
          <a-tag color="green">在校生</a-tag>
          <a-tag color="orange">键盘爱好者</a-tag>
          <!-- <a-tag color="blue"></a-tag> -->
          <a-tag color="cyan">被访问{{ view_count }}次</a-tag>
        </div>
        <a-divider>社交账号</a-divider>
        <a-tooltip placement="top" class="bilibili">
          <template slot="title">
            <span>https://space.bilibili.com/295208059</span>
          </template>
          <a href="https://space.bilibili.com/295208059">
            <img src="http://ayong6.free.idcfengye.com/public/ayongStatic/bilibiliIcon.png" class="account" />
          </a>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>https://gitee.com/ayong666</span>
          </template>
          <a href="https://gitee.com/ayong666">
            <a-icon :style="{fontSize: '28px',color:'#999'}" type="github" class="account" />
          </a>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>QQ:1296545486</span>
          </template>
          <a-icon :style="{fontSize: '28px',color:'#999'}" type="qq" class="account" />
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title">
            <span>wechat:aiyongbao6</span>
          </template>
          <a-icon :style="{fontSize: '28px',color:'#999'}" type="wechat" class="account" />
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      view_count: this.$store.state.web_count,
      circleUrl:
        "http://ayong6.free.idcfengye.com/public/ayongStatic/aiyongbao_Avatar.jpg",
    };
  },
  created() {
    let isAddCount = this.$store.state.isAddCount;
    if (!isAddCount) {
      this.addWebCount();
    }
  },
  methods: {
    addCount(total) {
      let timer = setInterval(() => {
        if (this.view_count < total) {
          let speed = Math.ceil((total - this.view_count) / 6);
          this.view_count += speed;
        } else {
          clearInterval(timer);
        }
      }, 10);
    },
    async addWebCount() {
      let result = await this.$http.get("/default/modWebCountById");
      this.addCount(result.data.data);
      this.$store.commit("alterWebCount", result.data.data);
      this.$store.commit("changeWebCount");
    },
  },
};
</script>

<style lang="less">
.bilibili {
  width: 28px;
  height: 28px;
  position: relative;
  img {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #999;
    border-radius: 50%;
    margin-top: -12px;
  }
}
.author-div {
  text-align: center;
  padding: 1rem;
  .author-name {
    font-size: 1rem;
    color: #1890ff;
  }
  .author-tag {
    line-height: 27px;
  }
  div {
    margin-bottom: 1rem;
  }
  .author-introduction {
    font-size: 0.8rem;
    color: #999;
  }
  .account {
    border-radius: 50%;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}
</style>